<template>
  <div>
    <div class="header">
      <navbar></navbar>
    </div>
    <div class="main">
      <!-- 视频首页 -->
      <!-- <my-index></my-index> -->
      <!-- 搜索页面 -->
      <!-- <my-search></my-search> -->
      <!-- 个人中心页面 -->
      <!-- <my-person></my-person> -->
      <!-- 播放页面 -->
      <!-- <my-play></my-play> -->
      <!-- 我的登录页面 -->
      <!-- <my-login></my-login> -->
      <router-view></router-view>
    </div>

    <div class="footer">
      <my-footer></my-footer>
    </div>
  </div>
</template>

<script>
import navbar from "./components/header.vue";
import myIndex from "./views/my-index.vue";
import myFooter from "./views/my-footer.vue";

export default {
  data: function() {
    return {
      visible: false
    };
  },
  created: function() {
    this.init();
  },
  methods: {
    init: function() {
      if(localStorage.getItem("userData")==='undefined') return;
      var userData = JSON.parse(localStorage.getItem("userData"))
      console.log("ok");
      this.axios.post('user/getUserById',{
        id:userData?userData.id:''
      }).then(res=>{
        localStorage.setItem("userData",JSON.stringify(res.data.userData))
        this.$store.commit("setUser",res.data.userData)
      })
    }
  },
  components: {
    navbar,
    myIndex,
    myFooter
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  //border-bottom: 1px solid #e6e6e6;
}
.main {
  padding-top:30px;
  width: 1180px;
  margin: 0 auto;
}
.footer {
  width: 100%;
  background: #f6f9fa;
  padding: 60px 0 10px 0;
}

//el layout布局组件样式
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>